<template>
  <div class="hostGoodsManage flexRSS">
    <!--门店左边-->
    <div class="hostGoodsManage-lf">
      <ShopListMenu @emitShopId="emitShopId" />
    </div>
    <!--右边-->
    <div class="hostGoodsManage-rt app-main-content-box">
      <!--资源详情-->
      <div class="title">{{ shopName }}</div>
      <!--table标签选择器-->
      <div class="content-tab">
        <el-tabs v-model="tabName" @tab-click="handleClick">
          <el-tab-pane label="物品分类" name="Itemclassification">
            <Itemclassification
              ref="Itemclassification"
              :tab-name="tabName"
              @goodNumActive="goodNumActive"
            />
          </el-tab-pane>
          <el-tab-pane label="物品资料" name="ItemInformation">
            <ItemInformation ref="ItemInformation" :tab-name="tabName" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import Itemclassification from './components/hostGoodsManageComponnet/Itemclassification.vue'
import ItemInformation from './components/hostGoodsManageComponnet/ItemInformation.vue'
export default {
  components: {
    Itemclassification,
    ItemInformation
  },
  data() {
    return {
      tabName: 'Itemclassification',
      shopId: 0,
      // 配置
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 1,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      tableLoading: false, // 表格loading
      searchLoading: false, // 搜索btn loading
      shopName: '',
      // 数据
      shopId: 0,
      shopName: '',
      list: [], // 表格数据
      filterForm: {
        // 筛选数据
        name: '',
        serial: ''
      }
    }
  },
  created() {},
  mounted() {
    this.initData()
  },
  methods: {
    /* 数据请求*/
    // 获取门店数据
    initData(
      page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      // 加入page
      this.filterForm.pageNum = page
      this.filterForm.pageSize = pageSize
      const params = Object.assign({ shopId: this.shopId }, this.filterForm)
      // 清除多余字段
      for (const key in params) {
        if (params[key] === '' || params[key] === 'all') {
          delete params[key]
        }
      }
      const data = params
      this.tableLoading = true
      this.khReqMethod({
        url: '/booking_admin/shop_manage/list',
        method: 'get'
      }).then(res => {
        this.tableLoading = false
        this.searchLoading = false
        this.list = res.data
        this.paginationConfig.total = res.data.total
        this.paginationConfig.page = res.data.pageNum
      })
    },
    handleClick() {
      if (this.tabName === 'Itemclassification') {
        this.$refs.Itemclassification.componentActive({ shopId: this.shopId })
      } else if (this.tabName === 'ItemInformation') {
        this.$refs.ItemInformation.componentActive({ shopId: this.shopId })
      }
    },
    /* 按钮点击*/
    /* other*/
    emitShopId(item) {
      this.shopId = item.shopId
      this.shopName = item.shopName
      // 显示组件
      this.handleClick()
    },
    goodNumActive(categoryName) {
      this.tabName = 'ItemInformation'
      this.$refs.ItemInformation.componentActive({
        categoryName: categoryName
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .hostGoodsManage-rt {
    width: 100%;
    >.title {
      font-size: 18px;
      margin-bottom: 16px;
    }
  }
  .content-tab {
    margin-top: 5px;
    background-color: #fff;
  }
</style>
